<template>
  <div class="card">
    <div>
      <a-input
        v-model="formData.search.realname"
        :allowClear="true"
        class="inputStyle"
        placeholder="用户姓名"
      ></a-input>
      <a-input v-model="formData.search.phone" :allowClear="true" class="inputStyle" placeholder="用户手机号"></a-input>
      <a-input
        v-model="formData.search.credit_card_bank_name"
        :allowClear="true"
        class="inputStyle"
        placeholder="信用卡名称"
      ></a-input>
      <a-input v-model="formData.search.order_sn" :allowClear="true" class="inputStyle" placeholder="订单号"></a-input>
      <a-select v-model="formData.search.status" :allowClear="true" placeholder="订单状态" class="inputStyle">
        <a-select-option v-for="item in orderStatus" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
    </div>
    <div style="margin: 10px 0">
      <a-select v-model="formData.search.channel_id" :allowClear="true" placeholder="收款通道" class="inputStyle">
        <a-select-option v-for="item in channel" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
      </a-select>
      <a-range-picker
        style="margin-right: 10px"
        v-model="formData.search.ctime"
        @change="changeDate"
        show-time
        format="YYYY-MM-DD HH:mm:ss"
      />
      <a-button type="primary" @click="getList">查询</a-button>
      <a-button style="margin-left: 10px" @click="reset">重置</a-button>
    </div>
    <a-table
      :rowKey="(record, index) => index"
      :pagination="{
        pageSize: formData.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: formData.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      style="border: 1px solid #e8e8e8"
      show-size-changer
      show-quick-jumper
      :loading="loading"
      :data-source="tableData"
      :columns="columns"
    >
      <div slot="status_txt" slot-scope="text, record">
        <span
          :style="`color: ${
            record.status_txt === '交易成功' ? '#00be0d' : record.status_txt === '待支付' ? 'red' : '#ff8c11'
          }`"
        >
          {{ record.status_txt }}
        </span>
      </div>
      <!-- <div slot="money" slot-scope="text, record">
        <span class="linkStyle" @click="viewMoney(record.order_sn)">{{
          record.money ? record.money : '查看余额'
        }}</span>
      </div> -->
      <div slot="chukuan" slot-scope="text, record" @click="viewInfo(record.order_sn, 1)">
        <span class="linkStyle" :style="{ color: record.statusColorChukuan }">{{
          record.chukuan ? record.chukuan : '查看'
        }}</span>
      </div>
      <div slot="shoukuan" slot-scope="text, record" @click="viewInfo(record.order_sn, 2)">
        <span class="linkStyle" :style="{ color: record.statusColorShoukuan }">{{
          record.shoukuan ? record.shoukuan : '查看'
        }}</span>
      </div>
      <div slot="caonima" slot-scope="text, record">
        <span class="linkStyle" @click="huiKuan(record.order_sn, record.id)">回款</span>
      </div>
    </a-table>

    <a-modal v-bind:visible="isShow" title="弹窗" @cancel="cancel" @ok="handleOk">
      <div class="form_item">
        <span> 卡ID： </span>
        <a-input style="width: 85%" v-model="cardValue"></a-input>
      </div>
      <div class="form_item">
        <span> 是否还款： </span>
        <a-switch default-checked v-model="ischeck" />
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getPlanAPI, getChannelListAPI, getViewMoneyAPI, huiKuanAPI, queryMoneuAPI } from '@/api/transaction.js'
export default {
  name: 'QuickManagement',
  data() {
    return {
      sn: '',
      cardValue: '',
      ischeck: false,
      isShow: false,
      loading: false,
      total: 0,
      orderStatus: [],
      channel: [],
      formData: {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          order_sn: '',
          channel_id: undefined,
          credit_card_bank_name: '',
          ctime: undefined,
          phone: '',
          realname: '',
          status: undefined
        }
      },
      columns: [
        {
          title: '#',
          dataIndex: 'id',
          align: 'center'
        },
        {
          title: '订单编号',
          dataIndex: 'order_sn',
          align: 'center'
        },
        {
          title: '真实姓名',
          dataIndex: 'realname',
          align: 'center'
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          align: 'center'
        },
        {
          title: '信用卡',
          dataIndex: 'credit_card_name',
          align: 'center'
        },
        {
          title: '储蓄卡',
          dataIndex: 'debit_card_name',
          align: 'center'
        },
        {
          title: '订单金额',
          dataIndex: 'amount',
          align: 'center'
        },
        {
          title: '收款状态',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'shoukuan' }
        },
        {
          title: '出款状态',
          align: 'center',
          width: '180px',
          scopedSlots: { customRender: 'chukuan' }
        },
        {
          title: '手续费',
          dataIndex: 'trade_service_fee',
          align: 'center'
        },
        {
          title: '笔数费',
          dataIndex: 'mirror_trade_fee',
          align: 'center'
        },
        {
          title: '到账金额',
          dataIndex: 'trade_amount',
          align: 'center'
        },
        {
          title: '收款通道',
          dataIndex: 'channelname',
          align: 'center'
        },
        {
          title: '收款时间',
          dataIndex: 'ctime',
          align: 'center'
        },
        {
          title: '交易状态',
          dataIndex: 'status_txt',
          align: 'center',
          scopedSlots: { customRender: 'status_txt' }
        },
        {
          title: '状态说明',
          dataIndex: 'status_remark',
          align: 'center'
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'caonima' },
          align: 'center'
        }
        // {
        //   title: '短信状态',
        //   dataIndex: 'is_send_sms_txt',
        //   align: 'center'
        // }
      ],
      tableData: []
    }
  },
  created() {
    this.getPlan()
    this.getList()
  },
  methods: {
    cancel() {
      this.isShow = false
      this.ischeck = false
      this.cardValue = ''
    },
    async handleOk() {
      try {
        const huan = this.ischeck ? '1' : '0'
        await huiKuanAPI({ order_sn: this.sn, card_id: this.cardValue, huan })
      } catch (error) {
        this.$message.info(error.data)
      } finally {
        this.isShow = false
      }
    },
    async huiKuan(sn) {
      this.sn = sn
      this.isShow = true
    },
    async viewMoney(id) {
      try {
        this.loading = true
        await getViewMoneyAPI({ order_sn: id })
      } catch (e) {
        console.log(e.data)
        this.tableData.map(item => {
          if (item.order_sn == id) {
            console.log(e.data)
            item.money = e.data.toString()
          }
          return item
        })
        this.$message.success('查询成功')
      } finally {
        this.loading = false
      }
    },
    async viewInfo(order, id) {
      try {
        this.loading = true
        console.log(order, id)
        const data = await queryMoneuAPI({ order_sn: order, trade_type: id })
        if (id == 1) {
          this.tableData.map(item => {
            if (item.order_sn == order) {
              console.log(data)
              item.chukuan = data.data.description
              item.statusColorChukuan = '#00be0d'
            }
            return item
          })
        }
        if (id == 2) {
          this.tableData.map(item => {
            if (item.order_sn == order) {
              item.shoukuan = data.data.description
              item.statusColorShoukuan = data.data.description
              item.statusColorShoukuan = '#00be0d'
            }
            return item
          })
        }
        this.$message.success('查询成功')
      } catch (e) {
        if (id == 1) {
          this.tableData.map(item => {
            if (item.order_sn == order) {
              item.chukuan = e.data.err_msg
              item.statusColorChukuan = '#ff0000'
            }
            return item
          })
        }
        if (id == 2) {
          this.tableData.map(item => {
            if (item.order_sn == order) {
              item.shoukuan = e.data.err_msg
              item.statusColorShoukuan = '#ff0000'
            }
            return item
          })
        }
        this.$message.success('查询成功')
      } finally {
        this.loading = false
      }
    },
    async getPlan() {
      const { data } = await getPlanAPI({ brand_id: process.env.VUE_APP_BRAND_ID, search: { type: 2 } })
      this.channel = data
    },
    changeDate(value, date) {
      if (date[0] == '' && date[1] == '') {
        this.formData.search.ctime = undefined
        return
      }
      console.log(date)
      this.formData.search.ctime = date
      console.log(this.formData.search.ctime)
    },
    async getList() {
      try {
        this.loading = true
        const { data } = await getChannelListAPI(this.formData)
        this.orderStatus = Object.entries(data.status_list).map(([id, name]) => {
          return { id: parseInt(id), name: name }
        })
        this.total = data.total
        this.tableData = data.list
      } finally {
        this.loading = false
      }
    },
    paginChange(value) {
      console.log(value)
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getList()
    },
    reset() {
      this.formData = {
        brand_id: process.env.VUE_APP_BRAND_ID,
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: {
          channel_id: undefined,
          credit_card_bank_name: '',
          ctime: undefined,
          phone: '',
          realname: '',
          status: undefined
        }
      }
      this.getList()
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-table-body {
  white-space: nowrap;
  width: 100%;
  overflow-x: auto;
  font-size: 14px;
}

/* 整个滚动条 */
/deep/ .ant-table-body::-webkit-scrollbar {
  width: 5px;
  height: 6px;
}

/deep/ .ant-table-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: #1890ff;
}

/deep/ .ant-table-body::-webkit-scrollbar-track {
  border-radius: 1px;
  background: #f1f1f1;
}
.inputStyle {
  margin-right: 10px;
  width: 200px;
}

.form_item {
  margin-bottom: 30px;
  span {
    white-space: nowrap;
  }
  display: flex;
  align-items: center;
}
</style>
